require("../less/player.less")

document.ready(function () {
    //获取dom
    let video = document.querySelector("#video");//视频标签
    let currentPart = document.querySelector("#currentPart");//当前第几个视频
    let countPart = document.querySelector("#countPart");//视频个数
    let title = document.querySelector("#title");//当前视频的标题
    let prevBtn = document.querySelector("#prevBtn");//上一个
    let pauseBtn = document.querySelector("#pauseBtn");//暂停
    let nextBtn = document.querySelector("#nextBtn");//下一个
    let progress = document.querySelector("#progress");//进度条
    let mask = document.querySelector("#mask");//蒙层
    let continuePlay = document.querySelector("#continuePlay");//继续播放
    let stopPlay = document.querySelector("#stopPlay");//停止
    let currentImg = document.querySelector("#currentImg");//当前视频的图片
    let curTitle = document.querySelector("#curTitle");//当前视频的标题
    let timerId = null;
    let times = [] //存放每个视频的播放时间 
    //从本地存储中获取出视频 
    let videos = JSON.parse(localStorage.getItem("videos"));
    // console.log(videos);


    let index = 0;// 视频播放的起始位置 

    /*封装 视频播放 */
    function playVideo() {
        video.src = window.$utils.BASE_URL + videos[index].videoUrl;
        video.play();
        currentPart.textContent = index + 1;//当前第几个视频
        countPart.textContent = videos.length;//视频个数
        title.textContent = videos[index].title //当前视频的标题
        progressBar()//进度条
    }
    playVideo();//页面打开时就播放视频


    /* 进度条
      当前播放时间 /总时间 = 当前长度/总长度
      当前长度 = 当前播放时间 /总时间 * 总长度


      要把每个视频的播放时间保存起来,
      多个时间放在一起就可以组成一个数组 
      let times=[]
      [3,4,5,6]
      0：3 -> 第1个视频的播放时间 
      1：4 -> 第2个视频的播放时间 
      2：5 -> 第3个视频的播放时间 
      3：6 -> 第4个视频的播放时间 
      times[0] = 1
      times[1] = 10

    */
    const screenWidth = window.screen.width;//设备的宽度
    // let index = 0;// 视频播放的起始位置 
    function progressBar() {
        window.clearInterval(timerId);
        timerId = window.setInterval(function () {

            let cur = video.currentTime //当前时间 
            times[index] = cur;
            console.log("当前时间 :", cur, "数组中存的时间：", times);
            let countTime = video.duration;//总时间
            progress.style.width = cur / countTime * screenWidth + "px";
            console.log("--------------");
        }, 30)

    }


    //自动播放
    video.addEventListener("ended", function () {
        index++;
        if (index <= videos.length - 1) {
            playVideo();
        } else {

            clearInterval(timerId)
        }
    })
    /* 上一个 */
    prevBtn.addEventListener("click", function () {
        index--;
        if (index >= 0) {

            playVideo();
        } else {
            index = 0;
        }
        console.log("index2:", index);

    })
    /*下一个 */
    nextBtn.addEventListener("click", function () {
        index++;
        if (index <= videos.length - 1) {
            playVideo();
        } else {
            index = videos.length - 1;
        }
        console.log("index1:", index);
    })
    /* 暂停*/
    pauseBtn.addEventListener("click", function () {
        //1暂停视频
        video.pause();
        //2停止进度条 
        window.clearInterval(timerId);
        //3显示蒙层
        mask.style.display = "block";

        if (index <= videos.length - 1) {
            //当前视频的图片
            currentImg.src = window.$utils.BASE_URL + videos[index].imgUrl
            //当前视频的标题
            curTitle.textContent = videos[index].title
        }

    })
    /* 继续训练 */
    continuePlay.addEventListener("click", function () {
        //隐藏蒙层
        mask.style.display = "none";

        //视频继续播放
        video.play();
        //进度条继续
        progressBar()
    })
    /* 结束训练 */
    stopPlay.addEventListener("click", function () {
        //alert(6)
        
        //发送请求，保存训练数据
        //课程 id
        let cid = window.location.search.split("=")[1];
        //用户id
        let userId = JSON.parse(localStorage.getItem("users")).userId;
        // console.log("sb",userId);
        //计算总时间 
        let countTime = 0;
        times.forEach(function (v) {
            countTime += v;
        })
        console.log("总的训练时间:", countTime);
        axios.post(window.$utils.BASE_URL + "/sports/saveTrain",
            {
                id: cid,//课程id
                userId: userId,//用户id
                takeTime: countTime,//训练时间
                calorie: countTime * 1.5//消耗卡路里
            })
            .then((res) => {
                let result = res.data;
                console.log("wd", result);
                if (result.status === 0) {
                    window.$utils.showToast("zp-good", "保存成功");
                    //跳转到课程列表页
                    window.setTimeout(() => {
                        window.location.href = "./courselist.html";
                    }, 3000)
                    } else if (result.status === 1) {
                    //保存失败
                    window.$utils.showToast("zp-close", "保存失败")
                }
            })
            .catch((error) => {
                console.log(error);
            })

    })
})